import 'package:flutter/material.dart';

// 导入构成 POS 界面的各个子组件。
// 这种组件化的方式使得每个部分都可以独立开发和维护，提高了代码的可重用性和可读性。
import '../widgets/left_nav_bar.dart';
import '../widgets/top_header.dart';
import '../widgets/stats_row.dart';
import '../widgets/order_section.dart';
import '../widgets/functions_section.dart';

/// POS (Point of Sale) 主屏幕。
///
/// 这是应用的核心用户界面，它将多个独立的子组件（如导航栏、头部、统计信息、订单列表等）
/// 组合成一个完整的、功能性的 POS 系统视图。
///
/// 整体布局采用了响应式设计，通过 `Row` 和 `Column` 的组合，以及 `Expanded` Widget，
/// 确保在不同尺寸的屏幕上都能良好地显示。
///
/// 这是应用的主界面，集成了多个子组件，共同构成了 POS 系统的核心视图。
/// 整体布局采用响应式设计，以适应不同尺寸的屏幕。
class PosScreen extends StatelessWidget {
  /// `PosScreen` 的构造函数。
  ///
  /// `super.key` 用于将 `key` 传递给父类 `StatelessWidget`，这是 Flutter 中推荐的做法，
  /// 有助于框架在 Widget 树中高效地识别和更新 Widget。
  const PosScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // `Scaffold` 是 Material Design 布局结构的基本实现。
    // 它提供了应用栏、抽屉、浮动操作按钮等常用布局元素的框架。
    return const Scaffold(
      // 设置页面的背景颜色。
      backgroundColor: Color(0xFFF5F5F5),
      // `body` 属性定义了 `Scaffold` 的主要内容。
      body: Row(
        children: [
          // 左侧是固定的导航栏。
          LeftNavBar(),
          // `Expanded` Widget 会填充 `Row` 中剩余的可用空间。
          Expanded(
            child: Padding(
              // `Padding` 用于在子组件周围添加内边距。
              padding:
                  EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0),
              // `Column` 用于垂直排列一系列子组件。
              child: Column(
                // `crossAxisAlignment` 设置子组件在交叉轴（此处为水平方向）上的对齐方式。
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 顶部标题栏。
                  TopHeader(),
                  // `SizedBox` 用于在组件之间创建固定大小的间距。
                  SizedBox(height: 20),
                  // 显示统计信息的行。
                  StatsRow(),
                  SizedBox(height: 20),
                  // 订单列表部分，使用 `Expanded` 填充剩余的垂直空间。
                  Expanded(
                    child: OrderSection(),
                  ),
                  SizedBox(height: 20),
                  // 底部功能按钮区域。
                  FunctionsSection(),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
